<template>
  <div class="register absolute">
   <!-- <div class="shading" style="height: 0;"> -->
<!--      <div class="pictrue acea-row row-center-wrapper">
        <image src="../static/logo2.png" />
      </div> -->
    <!-- </div> -->
		<image src="/static/images/merchantBg.png" mode="widthFix" style="width: 100%;"/>
    <div class="whiteBg">
      <!-- <div class="title">欢迎注册易客顺会员</div> -->
      <div class="list">
        <div class="item">
          <div class="acea-row row-middle">
            <text style="width: 160rpx;">用户姓名</text>
            <input type="text" placeholder="输入真实姓名" v-model="real_name" />
          </div>
        </div>
        <div class="item">
          <div class="acea-row row-middle">
            <text style="width: 160rpx;">联系电话</text>
            <input type="text" placeholder="输入手机号" v-model="account" />
          </div>
        </div>
        <div class="item" v-if="false">
          <div class="acea-row row-middle" >
            <text style="width: 160rpx;">验证码</text>
            <input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
<!--            <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
              {{ text }}
            </button> -->
            <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="sendMessage" style="font-size: 10px;width: 90px;">
              {{ countdown == 0 ? '获取验证码' : countdown + 'S'}}
            </button>
          </div>
        </div>
				<div class="item">
				  <div class="acea-row row-middle">
				    <text style="width: 160rpx;">代理类型</text>
				    <!-- <input type="text" placeholder="输入手机号" v-model="account" /> -->
		<!-- 				<input type="text" :value="typeList[type]" placeholder="选择代理类型" disabled @tap="btnClick"/> -->
						<picker @change="typeChange" :value="type" :range="typeList">
							<!-- <view class="picker">
								{{typeList[type]}}
							</view> -->
							<input type="text" :value="typeList[type]" placeholder="选择代理类型" readonly />
						</picker>
				  </div>
				</div>
				<div class="item">
				  <div class="acea-row row-middle">
				    <text style="width: 160rpx;">地址</text>
				    <input type="text" :value="addressData.formatted_address" placeholder="选择地区" readonly @tap="btnClick"/>
				  </div>
				</div>
<!-- 				<view class="cu-form-group area" v-if="false">
					<view class="click" @tap="btnClick"></view>
					<view class="title">所在地区</view>
					<input type="text" :value="addressData.formatted_address" placeholder="选择地区" disabled @tap="btnClick"/>
				</view> -->
				<!-- <view class="cu-form-group align-start" v-if="false">
					<view class="title">详细地址</view>
					<textarea 
					maxlength="-1" 
					@focus="focusInputtips" 
					@confirm="confirmInputtips" 
					@blur="blurInputtips"
					:placeholder-style="addressData.adcode==''?'color: #bbb':''" 
					:adjust-position="false" 
					v-model="addressData.address_full"
					:disabled="addressData.adcode==''?true:false" 
					:placeholder="addressData.adcode==''?'还没有选择地区哦~ 选择地区后完成此项':'支持智能联想，输入小区名试试~'"/>
				</view> -->
				
				<div class="item">
				  <div class="acea-row row-middle">
				    <text style="width: 160rpx;">代理价格</text>
				    <input type="text" placeholder="代理价格" disabled v-model="prices" />
				  </div>
				</div>
        <div class="item" v-if="false">
          <div class="acea-row row-middle">
            <!-- <image src="../static/code_2.png"></image> -->
            <input type="password" placeholder="填写您的密码" v-model="password" />
          </div>
        </div>
        <div class="item"  v-if="false">
          <div class="acea-row row-middle">
            <!-- <image src="../static/code_2.png"></image> -->
            <input type="password" placeholder="填写确认密码" v-model="passwordconf" />
          </div>
        </div>
        <div class="item"  v-if="false">
          <div class="acea-row row-middle">
            <!-- <image src="../static/phone_1.png"></image> -->
            <input type="text" placeholder="推荐人邮箱" :disabled="isDisabled" v-model="spphone" />
          </div>
        </div>
        <div class="item" v-if="false">
          <div class="acea-row row-middle">
            <image src="../static/phone_1.png"></image>
            <input type="text" placeholder="推荐人信息" v-model="sp_real_name" />
          </div>
        </div>
        <div class="item" v-if="isShowCode">
          <div class="align-left">
            <input type="text" placeholder="填写验证码" class="codeIput" v-model="codeVal" />
            <div class="code" @click="again"><img :src="codeUrl" /></div>
          </div>
        </div>
				
				<checkbox-group v-if="status==0" :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause" @change="CheckboxChange">
					<checkbox class="orange" :class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false" value="2" />
					<view>
						已阅读并同意<text style="color: red;" @tap="onDetails(1, '用户协议')">入驻协议</text>
					</view>
				</checkbox-group>
				<view v-if="status==-1">
					区域代理申请被驳回,驳回原因{{refuse_reason}}
				</view>
				
<!--        <view class="protocol">
          <checkbox-group @change='ChangeIsDefault'>
            <checkbox style="transform:scale(0.7)" :value="protocol"  :checked="protocol ? true : false" />
						已阅读并同意<text class="main-color" @click="privacy(4)">《用户协议》</text> 与<text class="main-color" @click="privacy(3)">《隐私协议》</text>
          </checkbox-group>
        </view> -->
      </div>
      <div class="logon" v-if="status==0 && audit_status==0" @click="register" >立即申请</div>
	  <div class="logon" v-if="status==0 && audit_status==1" >已申请,等待审核</div>
	  <div class="logon" v-if="status==-1" @click="register" >重新申请</div>
	  <div class="logon" v-if="status==1"  >已入驻区域代理</div>
      <!-- <div class="tip">
        <span class="font-color-red" @click="back">立即登录 |</span>
        <span class="font-color-red" @click="app"> APP下载 </span>
      </div> -->
    </div>
		<wanl-address ref='wanlAddress' :level="level" @selectAddress="successSelectAddress"></wanl-address>
    <!-- <div class="bottom"></div> -->
  </div>
</template>

<script>
  // import sendVerifyCode from "@/mixins/SendVerifyCode";
  // import {
  //   registerVerify,
  //   registerReset,
  //   register,
  //   getCodeApi,
  //   getUserSpid
  // } from "@/api/user";
  // import {
  //   HTTP_REQUEST_URL
  // } from '@/config/app.js';
	
  // import { validatorDefaultCatch } from "@/utils/dialog";
  // import attrs, { required, alpha_num, chs_phone } from "@utils/validate";
  // import { VUE_APP_API_URL } from "@utils";
  // import colors from '@/mixins/color.js';
  export default {
    name: "RetrievePassword",
    data: function() {
      return {
        account: "",
        phone: "",
        real_name: "",
        password: "",
        passwordconf: "",
        spphone: "",
        sp_real_name: "",
        spid: "",
        captcha: "",
        keyCode: "",
        codeUrl: "",
        codeVal: "",
        protocol: false,
		checked: 0,
		status: 0,
		audit_status: 0,
		refuse_reason:'',
        inAnimation: false,
				isDisabled:false,
        isShowCode: false,
				isTijiao: false,
				disabled: false,
				countdown: 0,
				cTimer: null,
				event: '',
				level: 2,
				addressData: {
					name: '',
					mobile: '',
					default: 0,
					//地区
					country: '', // 国家
					province: '', //省份
					city: '', // 城市
					citycode: '', // 城市代码
					district: '', // 县
					adcode: '', // 地区代码
					formatted_address: '', //详细地区
					//详情
					address: '', //详细地址
					address_name: '', // 地址名称
					address_full: '', // 完整地址名称
					location: '' //经纬度
				},
				addressList: {
					location: '',
					adcode: '',
					tips: {}
				},
				addressType: true,
				type: '',
				typeList: ['省级代理', '市级代理', '县级代理'],
				prices: ''
      };
    },
    // mixins: [sendVerifyCode, colors],
    mounted: function() {
      this.getCode();
    },
    onLoad(options) {
      let that = this;
      that.spid = options.spid;
      console.log("推荐人：" + that.spid);
	  this.getragent();
    //   getUserSpid(options.spid).then(res => {
    //     that.spphone = res.data.phone;
    //     that.sp_real_name = res.data.real_name
    //   }).catch(err => {
    //     that.spphone = '';
    //   })

    },
    methods: {
			btnClick() {
				if (!this.prices) {
					this.$wanlshop.msg('请先选择代理类型');
					return false
				}
				this.$refs.wanlAddress.show()
			},
			successSelectAddress(address) {
				this.addressData.country = address.country;
				this.addressData.province = address.province;
				this.addressData.city = address.city;
				this.addressData.citycode = address.citycode;
				this.addressData.district = address.district;
				this.addressData.formatted_address = address.formatted_address;
				this.addressData.location = address.location;
				this.addressData.adcode = address.adcode;
				this.addressList.location = address.location;
				this.addressList.adcode = address.adcode;
			},
			typeChange(e) {
				this.type = e.detail.value
				this.level = e.detail.value
				this.prices = this.type == 0 ? 98000 : this.type == 1 ? 49800 : this.type == 2 ? 9800 : '' 
			},
			CheckboxChange(e) {
				this.checked = e.detail.value;
			},
      ChangeIsDefault(e) {
				// console.log(e)
        this.$set(this, 'protocol', !this.protocol);
				this.protocol = !this.protocol
      },
      privacy(type) {
        uni.navigateTo({
          url: "/pages/users/privacy/index?type=" + type
        })
      },
      back() {
        //uni.navigateBack();
        uni.navigateTo({
          url: "/pages/user/auth/name"
        })
      },
      app() {
        window.location.href = `${HTTP_REQUEST_URL}/down/index.html`;
        //uni.navigateTo({
        //	url: `${HTTP_REQUEST_URL}/xyd.apk`
        //})
      },
      again() {
        this.codeUrl =
          VUE_APP_API_URL + "/captcha?" + this.keyCode + Date.parse(new Date());
      },
      getCode() {
      //   getCodeApi()
      //     .then(res => {
      //       this.keyCode = res.data.key;
      //     })
      //     .catch(res => {
      //       this.$util.Tips({
      //         title: res.msg.msg || this.$t(`加载失败`)
      //       })
      //     });
      },
      async register() {
        let that = this;
				
				console.log(that.checked)
        if (!that.checked == 2) {
					this.checked = 1;
					setTimeout(() => {
						this.checked = 0;
						this.$wanlshop.msg('请先同意用户协议和隐私保护声明');
						this.checked = ['2'];
					}, 300)
					return false
				}
				if (!that.real_name) {
								this.$wanlshop.msg('请填写姓名');
								return false
						}
				if (!that.account) {
						this.$wanlshop.msg('请填写联系电话');
						return false
				}

				if(that.isTijiao)
				{
					return false;
				}
				that.isTijiao=true;
				// await
				uni.request({
				    url: '/wanlshop/ragent/ragent', 
					method: 'POST',
					data:{
						mobile: that.account,
						captcha: that.captcha,
						password: that.password,
						nickname: that.real_name,
						addressData:that.addressData,
						type: that.type
					},
				    success: res => {
						this.$wanlshop.msg('申请成功，请等待审核');
						this.getragent();
				    },
					// 1.1.8升级
					complete: res =>{
						if(res.data.code == 0){
							that.isTijiao=false;
						}
					}
				});
      },
	  async getragent() {
		  uni.request({
		  	url: '/wanlshop/ragent/getragent',
		  	method: 'POST',
		  	success: res => {
		  		//this.bankList = res.data;
				if(res.data)
				{
					this.account=res.data.mobile;
					this.real_name=res.data.name;
					this.type=res.data.type-1;
					this.prices = this.type == 0 ? 98000 : this.type == 1 ? 49800 : this.type == 2 ? 9800 : '';
					this.refuse_reason=res.data.refuse_reason;
					this.status=res.data.audit_status;
					if(this.status==0)
					{
						this.audit_status=1;						
					}
					this.checked=2;
					

					this.addressData={
						name: res.data.name,
						mobile: res.data.mobile,
						default: 0,
						//地区
						country: res.data.country, // 国家
						province: res.data.province, //省份
						city: res.data.city, // 城市
						citycode: res.data.citycode, // 城市代码
						district: res.data.district, // 县
						adcode: res.data.adcode, // 地区代码
						formatted_address: res.data.formatted_address, //详细地区
						//详情
						address: '', //详细地址
						address_name: '', // 地址名称
						address_full: '', // 完整地址名称
						location: '' //经纬度
					};
				}
				
		  	}
		  });
	  },
      async registerReset() {
        var that = this;
        if (!that.account) {
					this.$wanlshop.msg('请填写邮箱码');
					return false
				}
        if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) {
					this.$wanlshop.msg('请输入正确的邮箱码');
					return false
				}
        if (!that.captcha) {
					this.$wanlshop.msg('请填写验证码');
						return false
					
				}
        registerReset({
            account: that.account,
            captcha: that.captcha,
            password: that.password,
            code: that.codeVal
          })
          .then(res => {
						this.$wanlshop.msg(res.msg);
            
          })
          .catch(res => {
            that.$util.Tips({
              title: res
            })
          });
      },
			sendMessage() {
				
				// await
				uni.request({
				    url: '/wanlshop/sms/send', 
					method: 'POST',
					data:{
						event: this.event,  
						mobile: this.mobile
					},
				    success: res => {
						this.$wanlshop.msg('验证码发送成功');
						this.startTimer();
				    },
					// 1.1.8升级
					complete: res =>{
						if(res.data.code == 4){
							this.$refs.wanlCaptcha.init({event: this.event,mobile: this.mobile}).then(() => {
								// 验证通过回调
								this.$wanlshop.msg('验证码发送成功');
								this.startTimer();
							}).catch(() => {
								uni.navigateBack({ delta: 1 });
							});
						}
					}
				});
			},
			startTimer() {
				this.countdown = 60;
				
				if (this.cTimer == null) {
					this.cTimer = setInterval(() => {
						this.countdown--;
						if (this.countdown == 0) {
							this.clearTimer();
						}
					}, 1000)
				}
			},
			clearTimer() {
				clearInterval(this.cTimer);
				this.cTimer = null;
			},
			resend(){
				this.startTimer();
				this.code = [];
				this.currentFocus = 0;
				this.countdown = 60;
				this.sendMessage();
			},
      async code() {
        let that = this;
        if (!that.account) {
					this.$wanlshop.msg('请填写手机号');
						return false
				}
        if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) {
					this.$wanlshop.msg('请输入正确的手机号');
						return false
				}
        that.type = "register";
        await registerVerify({
            phone: that.account,
            type: that.type,
            key: that.keyCode,
            code: that.codeVal
          })
          .then(res => {
						this.$wanlshop.msg(res.msg || `加载失败`)
            
            that.sendCode();
          })
          .catch(res => {
						this.$wanlshop.msg(res);
            
          });
      },
    }
  };
</script>
<style scoped>
	/* @import url("auth.css"); */
	
	.auth-clause {
		display: flex;
		align-items: center;
		font-size: 25rpx;
		color: #909090;
	}
	
	
	.shake-horizontal{
		animation-name: shake-horizontal;
		animation-duration: 100ms;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		animation-delay: 0s;
		animation-play-state: running;
	}
	
	.auth-clause checkbox {
		margin-right: 6rpx;
		transform: scale(0.7);
	}

	checkbox .uni-checkbox-input::before {
		display: block;
	}
  .code img {
    width: 100%;
    height: 100%;
  }

  .protocol {
    margin-top: 40rpx;
    color: #999999;
    font-size: 24rpx;
    text-align: left;
    bottom: 20rpx;
  }

  .trembling {
    animation: shake 0.6s;
  }
	
	.acea-row {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap
	}
	
	.acea-row.row-middle {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center
	}
	
	.acea-row.row-top {
		-webkit-box-align: start;
		-moz-box-align: start;
		-o-box-align: start;
		-ms-flex-align: start;
		-webkit-align-items: flex-start;
		align-items: flex-start
	}
	
	.acea-row.row-bottom {
		-webkit-box-align: end;
		-moz-box-align: end;
		-o-box-align: end;
		-ms-flex-align: end;
		-webkit-align-items: flex-end;
		align-items: flex-end
	}
	
	.acea-row.row-center {
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center
	}
	
	.acea-row.row-right {
		-webkit-box-pack: end;
		-moz-box-pack: end;
		-o-box-pack: end;
		-ms-flex-pack: end;
		-webkit-justify-content: flex-end;
		justify-content: flex-end
	}
	
	.acea-row.row-left {
		-webkit-box-pack: start;
		-moz-box-pack: start;
		-o-box-pack: start;
		-ms-flex-pack: start;
		-webkit-justify-content: flex-start;
		justify-content: flex-start
	}
	
	.acea-row.row-between {
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between
	}
	
	.acea-row.row-around {
		justify-content: space-around;
		-webkit-justify-content: space-around
	}
	
	.acea-row.row-column-around {
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		justify-content: space-around;
		-webkit-justify-content: space-around
	}
	
	.acea-row.row-column {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column
	}
	
	.acea-row.row-column-between {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between
	}
	
	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center
	}
	
	.acea-row.row-between-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between
	}
	.register {
		background: linear-gradient(180deg, #fe7015, #eb3b26);
		width: 100%;
		height: 100vh
	}
	
	.register .shading {
			background-image: url("");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 286rpx;
			padding-top: 70rpx;
		}
	
	.register .shading .pictrue {
		width: 172rpx;
		height: 172rpx;
		border-radius: 50%;
		background-color: rgba(255,255,255,.8);
		margin: 0 auto
	}
	
	.register .shading .pictrue image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 50%;
		display: block
	}
	
	.register .whiteBg {
		width: 620rpx;
		border-radius: 16rpx;
		background-color: #fff;
		margin: -10rpx auto 0 auto;
		padding: 45rpx 30rpx 40rpx 30rpx
	}
	
	.register .whiteBg .title {
		font-size: 36rpx;
		color: #282828;
		text-align: center;
		font-weight: 700
	}
	
	.register .whiteBg .title .item~.item {
		margin-left: 85rpx
	}
	
	.register .whiteBg .title .item {
		color: #999;
		border-bottom: 5rpx solid #fff;
		padding-bottom: 10rpx
	}
	
	.register .whiteBg .title .item.on {
		color: #282828;
		border-bottom-color: #f35749
	}
	
	.register .whiteBg .list .item {
		
		/* border-bottom: 1rpx solid #ededed; */
		padding: 47rpx 0 13rpx 0;
		position: relative;
		width:100%;
		box-sizing: border-box;
	}
	
	.register .whiteBg .list .item .name {
		font-size: 26rpx;
		color: #2d3342;
		margin-bottom: 27rpx;
		text-align: left
	}
	
	.register .whiteBg .list .item image {
		width: 40rpx;
		height: 40rpx;
		display: block
	}
	
	.register .whiteBg .list .item input {
		font-size: 32rpx;
		flex: 1;
		margin-left: 20rpx
	}
	
	.register .whiteBg .list .item .placeholder {
		color: #ccc
	}
	
	.register .whiteBg .list .item .codeIput {
		width: 250rpx;
		margin-left: 20rpx
	}
	
	.register .whiteBg .list .item .code {
		position: absolute;
		width: 150rpx;
		height: 50rpx;
		background-color: #e69f45;
		border-radius: 30rpx;
		color: #fff;
		line-height: 50rpx;
		text-align: center;
		bottom: 17rpx;
		right: 0;
		font-size: 25rpx
	}
	
	.register .whiteBg .list .item .code.on {
		background-color: #bbb
	}
	
	.register .whiteBg .list .forgetPwd {
		text-align: right;
		font-size: 28rpx;
		color: #666;
		margin-top: 20rpx
	}
	
	.register .whiteBg .list .forgetPwd .iconfont {
		font-size: 30rpx;
		margin-right: 10rpx;
		vertical-align: middle
	}
	
	.register .whiteBg .logon {
		font-size: 34rpx;
		color: #fff;
		font-weight: 700;
		height: 86rpx;
		border-radius: 43rpx;
		background: #fe6600;
		text-align: center;
		line-height: 86rpx;
		margin-top: 47rpx
	}
	
	.register .whiteBg .tip {
		height: 110rpx;
		text-align: center;
		line-height: 105rpx;
		font-size: 30rpx;
		color: #ccc
	}
	
	.register .bottom {
			background-image: url("");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 620rpx;
			height: 36rpx;
			margin: 0 auto;
		}
</style>
